1 <!--
2 Author: W3layouts
3 Author URL: http://w3layouts.com
4 License: Creative Commons Attribution 3.0 Unported
5 License URL: http://creativecommons.org/licenses/by/3.0/
6 -->
7 <!DOCTYPE HTML>
8 <html>
9 <head>
10 <title>Pooled Admin Panel Category Flat Bootstrap Responsive Web Template | Typography :: w3layouts</title>
11 <meta name="viewport" content="width=device-width, initial-scale=1">
12 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
13 <meta name="keywords" content="Pooled Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
14 Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
15 <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
16 <!-- Bootstrap Core CSS -->
17 <link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
18 <!-- Custom CSS -->
19 <link href="css/style.css" rel='stylesheet' type='text/css' />
20 <link rel="stylesheet" href="css/morris.css" type="text/css"/>
21 <!-- Graph CSS -->
22 <link href="css/font-awesome.css" rel="stylesheet">
23 <!-- jQuery -->
24 <script src="js/jquery-2.1.4.min.js"></script>
25 <!-- //jQuery -->
26 <link href='//fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400' rel='stylesheet' type='text/css'/>
27 <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
28 <!-- lined-icons -->
29 <link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
30 <!-- //lined-icons -->
31 </head>
32 <body>
33 <div class="page-container">
34 <!--/content-inner-->
35 <div class="left-content">
36 <div class="mother-grid-inner">
37 <!--header start here-->
38 <div class="header-main">
39 <div class="logo-w3-agile">
40 <h1><a href="index.html">Pooled</a></h1>
41 </div>
42 <div class="w3layouts-left">
43
44 <!--search-box-->
45 <div class="w3-search-box">
46 <form action="#" method="post">
47 <input type="text" placeholder="Search..." required="">
48 <input type="submit" value="">
49 </form>
50 </div><!--//end-search-box-->
51 <div class="clearfix"> </div>
52 </div>
53 <div class="w3layouts-right">
54 <div class="profile_details_left"><!--notifications of menu start -->
55 <ul class="nofitications-dropdown">
56 <li class="dropdown head-dpdn">
57 <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">3</span></a>
58 <ul class="dropdown-menu">
59 <li>
60 <div class="notification_header">
61 <h3>You have 3 new messages</h3>
62 </div>
63 </li>
64 <li><a href="#">
65 <div class="user_img"><img src="images/in11.jpg" alt=""></div>
66 <div class="notification_desc">
67 <p>Lorem ipsum dolor</p>
68 <p><span>1 hour ago</span></p>
69 </div>
70 <div class="clearfix"></div>
71 </a></li>
72 <li class="odd"><a href="#">
73 <div class="user_img"><img src="images/in10.jpg" alt=""></div>
74 <div class="notification_desc">
75 <p>Lorem ipsum dolor </p>
76 <p><span>1 hour ago</span></p>
77 </div>
78 <div class="clearfix"></div>
79 </a></li>
80 <li><a href="#">
81 <div class="user_img"><img src="images/in9.jpg" alt=""></div>
82 <div class="notification_desc">
83 <p>Lorem ipsum dolor</p>
84 <p><span>1 hour ago</span></p>
85 </div>
86 <div class="clearfix"></div>
87 </a></li>
88 <li>
89 <div class="notification_bottom">
90 <a href="#">See all messages</a>
91 </div>
92 </li>
93 </ul>
94 </li>
95 <li class="dropdown head-dpdn">
96 <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">3</span></a>
97 <ul class="dropdown-menu">
98 <li>
99 <div class="notification_header">
100 <h3>You have 3 new notification</h3>
101 </div>
102 </li>
103 <li><a href="#">
104 <div class="user_img"><img src="images/in8.jpg" alt=""></div>
105 <div class="notification_desc">
106 <p>Lorem ipsum dolor</p>
107 <p><span>1 hour ago</span></p>
108 </div>
109 <div class="clearfix"></div>
110 </a></li>
111 <li class="odd"><a href="#">
112 <div class="user_img"><img src="images/in6.jpg" alt=""></div>
113 <div class="notification_desc">
114 <p>Lorem ipsum dolor</p>
115 <p><span>1 hour ago</span></p>
116 </div>
117 <div class="clearfix"></div>
118 </a></li>
119 <li><a href="#">
120 <div class="user_img"><img src="images/in7.jpg" alt=""></div>
121 <div class="notification_desc">
122 <p>Lorem ipsum dolor</p>
123 <p><span>1 hour ago</span></p>
124 </div>
125 <div class="clearfix"></div>
126 </a></li>
127 <li>
128 <div class="notification_bottom">
129 <a href="#">See all notifications</a>
130 </div>
131 </li>
132 </ul>
133 </li>
134 <li class="dropdown head-dpdn">
135 <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">9</span></a>
136 <ul class="dropdown-menu">
137 <li>
138 <div class="notification_header">
139 <h3>You have 8 pending task</h3>
140 </div>
141 </li>
142 <li><a href="#">
143 <div class="task-info">
144 <span class="task-desc">Database update</span><span class="percentage">40%</span>
145 <div class="clearfix"></div>
146 </div>
147 <div class="progress progress-striped active">
148 <div class="bar yellow" style="width:40%;"></div>
149 </div>
150 </a></li>
151 <li><a href="#">
152 <div class="task-info">
153 <span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
154 <div class="clearfix"></div>
155 </div>
156 <div class="progress progress-striped active">
157 <div class="bar green" style="width:90%;"></div>
158 </div>
159 </a></li>
160 <li><a href="#">
161 <div class="task-info">
162 <span class="task-desc">Mobile App</span><span class="percentage">33%</span>
163 <div class="clearfix"></div>
164 </div>
165 <div class="progress progress-striped active">
166 <div class="bar red" style="width: 33%;"></div>
167 </div>
168 </a></li>
169 <li><a href="#">
170 <div class="task-info">
171 <span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
172 <div class="clearfix"></div>
173 </div>
174 <div class="progress progress-striped active">
175 <div class="bar blue" style="width: 80%;"></div>
176 </div>
177 </a></li>
178 <li>
179 <div class="notification_bottom">
180 <a href="#">See all pending tasks</a>
181 </div>
182 </li>
183 </ul>
184 </li>
185 <div class="clearfix"> </div>
186 </ul>
187 <div class="clearfix"> </div>
188 </div>
189 <!--notification menu end -->
190
191 <div class="clearfix"> </div>
192 </div>
193 <div class="profile_details w3l">
194 <ul>
195 <li class="dropdown profile_details_drop">
196 <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
197 <div class="profile_img">
198 <span class="prfil-img"><img src="images/in4.jpg" alt=""> </span>
199 <div class="user-name">
200 <p>Malorum</p>
201 <span>Administrator</span>
202 </div>
203 <i class="fa fa-angle-down"></i>
204 <i class="fa fa-angle-up"></i>
205 <div class="clearfix"></div>
206 </div>
207 </a>
208 <ul class="dropdown-menu drp-mnu">
209 <li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
210 <li> <a href="#"><i class="fa fa-user"></i> Profile</a> </li>
211 <li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
212 </ul>
213 </li>
214 </ul>
215 </div>
216
217 <div class="clearfix"> </div>
218 </div>
219 <!--heder end here-->
220 <ol class="breadcrumb">
221 <li class="breadcrumb-item"><a href="index.html">Home</a><i class="fa fa-angle-right"></i>Short Codes <i class="fa fa-angle-right"></i>Typography</li>
222 </ol>
223 <div class="agile3-grids">
224
225 <div class="wthree-typo">
226
227 <div class="grid_3 grid_4 w3layouts">
228 <h3 class="hdg">Headings</h3>
229 <div class="bs-example">
230 <table class="table">
231 <tbody>
232 <tr>
233 <td><h1 id="h1.-bootstrap-heading">h1. Bootstrap heading<a class="anchorjs-link" href="#h1.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h1></td>
234 <td class="type-info">Semibold 36px</td>
235 </tr>
236 <tr>
237 <td><h2 id="h2.-bootstrap-heading">h2. Bootstrap heading<a class="anchorjs-link" href="#h2.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h2></td>
238 <td class="type-info">Semibold 30px</td>
239 </tr>
240 <tr>
241 <td><h3 id="h3.-bootstrap-heading">h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
242 <td class="type-info">Semibold 24px</td>
243 </tr>
244 <tr>
245 <td><h4 id="h4.-bootstrap-heading">h4. Bootstrap heading<a class="anchorjs-link" href="#h4.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h4></td>
246 <td class="type-info">Semibold 18px</td>
247 </tr>
248 <tr>
249 <td><h5 id="h5.-bootstrap-heading">h5. Bootstrap heading<a class="anchorjs-link" href="#h5.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h5></td>
250 <td class="type-info">Semibold 14px</td>
251 </tr>
252 <tr>
253 <td><h6>h6. Bootstrap heading</h6></td>
254 <td class="type-info">Semibold 12px</td>
255 </tr>
256 </tbody>
257 </table>
258 </div>
259 </div>
260
261 <div class="grid_3 grid_5 w3l">
262 <h3>Progress Bars</h3>
263 <div class="tab-content">
264 <div class="tab-pane active" id="domprogress">
265 <div class="progress">
266 <div class="progress-bar progress-bar-primary" style="width: 20%"></div>
267 </div>
268 <p>Info with <code>progress-bar-info</code> class.</p>
269 <div class="progress">
270 <div class="progress-bar progress-bar-info" style="width: 60%"></div>
271 </div>
272 <p>Success with <code>progress-bar-success</code> class.</p>
273 <div class="progress">
274 <div class="progress-bar progress-bar-success" style="width: 30%"></div>
275 </div>
276 <p>Warning with <code>progress-bar-warning</code> class.</p>
277 <div class="progress">
278 <div class="progress-bar progress-bar-warning" style="width: 70%"></div>
279 </div>
280 <p>Danger with <code>progress-bar-danger</code> class.</p>
281 <div class="progress">
282 <div class="progress-bar progress-bar-danger" style="width: 50%"></div>
283 </div>
284 <p>Inverse with <code>progress-bar-inverse</code> class.</p>
285 <div class="progress">
286 <div class="progress-bar progress-bar-inverse" style="width: 40%"></div>
287 </div>
288 <p>Inverse with <code>progress-bar-inverse</code> class.</p>
289 <div class="progress">
290 <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
291 <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
292 <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
293 </div>
294 </div>
295 </div>
296 </div>
297 <div class="grid_3 grid_5 w3ls">
298 <h3>Alerts</h3>
299 <div class="alert alert-success" role="alert">
300 <strong>Well done!</strong> You successfully read this important alert message.
301 </div>
302 <div class="alert alert-info" role="alert">
303 <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
304 </div>
305 <div class="alert alert-warning" role="alert">
306 <strong>Warning!</strong> Best check yo self, you're not looking too good.
307 </div>
308 <div class="alert alert-danger" role="alert">
309 <strong>Oh snap!</strong> Change a few things up and try submitting again.
310 </div>
311 </div>
312 <div class="grid_3 grid_5 agileits">
313 <h3>Pagination</h3>
314 <div class="col-md-6">
315 <nav>
316 <ul class="pagination pagination-lg">
317 <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
318 <li><a href="#">1</a></li>
319 <li><a href="#">2</a></li>
320 <li><a href="#">3</a></li>
321 <li><a href="#">4</a></li>
322 <li><a href="#">5</a></li>
323 <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
324 </ul>
325 </nav>
326 <nav>
327 <ul class="pagination">
328 <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
329 <li><a href="#">1</a></li>
330 <li><a href="#">2</a></li>
331 <li><a href="#">3</a></li>
332 <li><a href="#">4</a></li>
333 <li><a href="#">5</a></li>
334 <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
335 </ul>
336 </nav>
337 <nav>
338 <ul class="pagination pagination-sm">
339 <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
340 <li><a href="#">1</a></li>
341 <li><a href="#">2</a></li>
342 <li><a href="#">3</a></li>
343 <li><a href="#">4</a></li>
344 <li><a href="#">5</a></li>
345 <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
346 </ul>
347 </nav>
348 </div>
349 <div class="col-md-6">
350 <ul class="pagination pagination-lg">
351 <li class="disabled"><a href="#"><i class="fa fa-angle-left">«</i></a></li>
352 <li class="active"><a href="#">1</a></li>
353 <li><a href="#">2</a></li>
354 <li><a href="#">3</a></li>
355 <li><a href="#">4</a></li>
356 <li><a href="#">5</a></li>
357 <li><a href="#"><i class="fa fa-angle-right">»</i></a></li>
358 </ul>
359 <nav>
360 <ul class="pagination">
361 <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
362 <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
363 <li><a href="#">2</a></li>
364 <li><a href="#">3</a></li>
365 <li><a href="#">4</a></li>
366 <li><a href="#">5</a></li>
367 <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
368 </ul>
369 </nav>
370 <ul class="pagination pagination-sm">
371 <li class="disabled"><a href="#"><i class="fa fa-angle-left">«</i></a></li>
372 <li class="active"><a href="#">1</a></li>
373 <li><a href="#">2</a></li>
374 <li><a href="#">3</a></li>
375 <li><a href="#">4</a></li>
376 <li><a href="#">5</a></li>
377 <li><a href="#"><i class="fa fa-angle-right">»</i></a></li>
378 </ul>
379 </div>
380 <div class="clearfix"> </div>
381 </div>
382 <div class="grid_3 grid_5 agileinfo">
383 <h3>Breadcrumbs</h3>
384 <ol class="breadcrumb">
385 <li class="active">Home</li>
386 </ol>
387 <ol class="breadcrumb">
388 <li><a href="#">Home</a></li>
389 <li class="active">Library</li>
390 </ol>
391 <ol class="breadcrumb">
392 <li><a href="#">Home</a></li>
393 <li><a href="#">Library</a></li>
394 <li class="active">Data</li>
395 </ol>
396 </div>
397 <div class="grid_3 grid_5 wthree">
398 <h3>Badges</h3>
399 <div class="col-md-6 agileits-w3layouts">
400 <p>Add modifier classes to change the appearance of a badge.</p>
401 <table class="table table-bordered">
402 <thead>
403 <tr>
404 <th>Classes</th>
405 <th>Badges</th>
406 </tr>
407 </thead>
408 <tbody>
409 <tr>
410 <td>No modifiers</td>
411 <td><span class="badge">42</span></td>
412 </tr>
413 <tr>
414 <td><code>.badge-primary</code></td>
415 <td><span class="badge badge-primary">1</span></td>
416 </tr>
417 <tr>
418 <td><code>.badge-success</code></td>
419 <td><span class="badge badge-success">22</span></td>
420 </tr>
421 <tr>
422 <td><code>.badge-info</code></td>
423 <td><span class="badge badge-info">30</span></td>
424 </tr>
425 <tr>
426 <td><code>.badge-warning</code></td>
427 <td><span class="badge badge-warning">412</span></td>
428 </tr>
429 <tr>
430 <td><code>.badge-danger</code></td>
431 <td><span class="badge badge-danger">999</span></td>
432 </tr>
433 </tbody>
434 </table>
435 </div>
436 <div class="col-md-6 w3-agileits">
437 <p>Easily highlight new or unread items with the <code>.badge</code> class</p>
438 <div class="list-group list-group-alternate">
439 <a href="#" class="list-group-item"><span class="badge">201</span> <i class="ti ti-email"></i> Inbox </a>
440 <a href="#" class="list-group-item"><span class="badge badge-primary">5021</span> <i class="ti ti-eye"></i> Profile visits </a>
441 <a href="#" class="list-group-item"><span class="badge">14</span> <i class="ti ti-headphone-alt"></i> Call </a>
442 <a href="#" class="list-group-item"><span class="badge">20</span> <i class="ti ti-comments"></i> Messages </a>
443 <a href="#" class="list-group-item"><span class="badge badge-warning">14</span> <i class="ti ti-bookmark"></i> Bookmarks </a>
444 <a href="#" class="list-group-item"><span class="badge badge-danger">30</span> <i class="ti ti-bell"></i> Notifications </a>
445 </div>
446 </div>
447 <div class="clearfix"> </div>
448 </div>
449 <div class="grid_3 grid_5 agile">
450 <h3>Wells</h3>
451 <div class="well">
452 There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
453 </div>
454 <div class="well">
455 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here
456 </div>
457 <div class="well">
458 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
459 </div>
460 </div>
461 <h3 class="bars">Unordered List</h3>
462 <ul class="list-group w3-agile">
463 <li class="list-group-item">Cras justo odio</li>
464 <li class="list-group-item">Dapibus ac facilisis in</li>
465 <li class="list-group-item">Morbi leo risus</li>
466 <li class="list-group-item">Porta ac consectetur ac</li>
467 <li class="list-group-item">Vestibulum at eros</li>
468 </ul>
469 <h3 class="bars">Ordered List</h3>
470 <ol>
471 <li class="list-group-item1">Cras justo odio</li>
472 <li class="list-group-item1">Dapibus ac facilisis in</li>
473 <li class="list-group-item1">Morbi leo risus</li>
474 <li class="list-group-item1">Porta ac consectetur ac</li>
475 <li class="list-group-item1">Vestibulum at eros</li>
476 </ol>
477 <h3 class="bars">Forms</h3>
478 <div class="input-group w3_w3layouts">
479 <span class="input-group-addon" id="basic-addon1">@</span>
480 <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
481 </div>
482 <div class="input-group w3_w3layouts">
483 <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
484 <span class="input-group-addon" id="basic-addon2">@example.com</span>
485 </div>
486 <div class="input-group w3_w3layouts">
487 <span class="input-group-addon">$</span>
488 <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
489 <span class="input-group-addon">.00</span>
490 </div>
491 <div class="input-group input-group-lg w3_w3layouts">
492 <span class="input-group-addon" id="sizing-addon1">@</span>
493 <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
494 </div>
495 <div class="input-group w3_w3layouts">
496 <span class="input-group-addon" id="sizing-addon2">@</span>
497 <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
498 </div>
499 <div class="input-group input-group-sm w3_w3layouts">
500 <span class="input-group-addon" id="sizing-addon3">@</span>
501 <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
502 </div>
503 <div class="row">
504 <div class="col-lg-6 in-gp-tl">
505 <div class="input-group">
506 <span class="input-group-addon">
507 <input type="checkbox" aria-label="...">
508 </span>
509 <input type="text" class="form-control" aria-label="...">
510 </div><!-- /input-group -->
511 </div><!-- /.col-lg-6 -->
512 <div class="col-lg-6 in-gp-tb">
513 <div class="input-group">
514 <span class="input-group-addon">
515 <input type="radio" aria-label="...">
516 </span>
517 <input type="text" class="form-control" aria-label="...">
518 </div><!-- /input-group -->
519 </div><!-- /.col-lg-6 -->
520 </div><!-- /.row -->
521 <div class="row">
522 <div class="col-lg-6 in-gp-tl">
523 <div class="input-group">
524 <span class="input-group-btn">
525 <button class="btn btn-default" type="button">Go!</button>
526 </span>
527 <input type="text" class="form-control" placeholder="Search for...">
528 </div><!-- /input-group -->
529 </div><!-- /.col-lg-6 -->
530 <div class="col-lg-6 in-gp-tb">
531 <div class="input-group">
532 <input type="text" class="form-control" placeholder="Search for...">
533 <span class="input-group-btn">
534 <button class="btn btn-default" type="button">Go!</button>
535 </span>
536 </div><!-- /input-group -->
537 </div><!-- /.col-lg-6 -->
538 </div><!-- /.row -->
539 <div class="row">
540 <div class="col-lg-6 in-gp-tl">
541 <div class="input-group">
542 <div class="input-group-btn">
543 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
544 <ul class="dropdown-menu">
545 <li><a href="#">Action</a></li>
546 <li><a href="#">Another action</a></li>
547 <li><a href="#">Something else here</a></li>
548 <li role="separator" class="divider"></li>
549 <li><a href="#">Separated link</a></li>
550 </ul>
551 </div><!-- /btn-group -->
552 <input type="text" class="form-control" aria-label="...">
553 </div><!-- /input-group -->
554 </div><!-- /.col-lg-6 -->
555 <div class="col-lg-6 in-gp-tb">
556 <div class="input-group">
557 <input type="text" class="form-control" aria-label="...">
558 <div class="input-group-btn">
559 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
560 <ul class="dropdown-menu dropdown-menu-right">
561 <li><a href="#">Action</a></li>
562 <li><a href="#">Another action</a></li>
563 <li><a href="#">Something else here</a></li>
564 <li role="separator" class="divider"></li>
565 <li><a href="#">Separated link</a></li>
566 </ul>
567 </div><!-- /btn-group -->
568 </div><!-- /input-group -->
569 </div><!-- /.col-lg-6 -->
570 </div><!-- /.row -->
571 <div class="page-header">
572 <h3 class="bars">Tables</h3>
573 </div>
574 <h2 class="typoh2">Default styles</h2>
575 <p>For basic stylinglight padding and only horizontal add the base class <code>.table</code> to any <code><table></code>.</p>
576 <div class="bs-docs-example">
577 <table class="table">
578 <thead>
579 <tr>
580 <th>#</th>
581 <th>First Name</th>
582 <th>Last Name</th>
583 <th>Username</th>
584 </tr>
585 </thead>
586 <tbody>
587 <tr>
588 <td>1</td>
589 <td>Mark</td>
590 <td>Otto</td>
591 <td>@mdo</td>
592 </tr>
593 <tr>
594 <td>2</td>
595 <td>Jacob</td>
596 <td>Thornton</td>
597 <td>@fat</td>
598 </tr>
599 <tr>
600 <td>3</td>
601 <td>Larry</td>
602 <td>the Bird</td>
603 <td>@twitter</td>
604 </tr>
605 </tbody>
606 </table>
607 </div>
608 <hr class="bs-docs-separator">
609 <p>Add any of the following classes to the <code>.table</code> base class.</p>
610 <p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-8).</p>
611 <div class="bs-docs-example">
612 <table class="table table-striped">
613 <thead>
614 <tr>
615 <th>#</th>
616 <th>First Name</th>
617 <th>Last Name</th>
618 <th>Username</th>
619 </tr>
620 </thead>
621 <tbody>
622 <tr>
623 <td>1</td>
624 <td>Mark</td>
625 <td>Otto</td>
626 <td>@mdo</td>
627 </tr>
628 <tr>
629 <td>2</td>
630 <td>Jacob</td>
631 <td>Thornton</td>
632 <td>@fat</td>
633 </tr>
634 <tr>
635 <td>3</td>
636 <td>Larry</td>
637 <td>the Bird</td>
638 <td>@twitter</td>
639 </tr>
640 </tbody>
641 </table>
642 </div>
643 <p>Add borders and rounded corners to the table.</p>
644 <div class="bs-docs-example">
645 <table class="table table-bordered">
646 <thead>
647 <tr>
648 <th>#</th>
649 <th>First Name</th>
650 <th>Last Name</th>
651 <th>Username</th>
652 </tr>
653 </thead>
654 <tbody>
655 <tr>
656 <td rowspan="2">1</td>
657 <td>Mark</td>
658 <td>Otto</td>
659 <td>@mdo</td>
660 </tr>
661 <tr>
662 <td>Mark</td>
663 <td>Otto</td>
664 <td>@getbootstrap</td>
665 </tr>
666 <tr>
667 <td>2</td>
668 <td>Jacob</td>
669 <td>Thornton</td>
670 <td>@fat</td>
671 </tr>
672 <tr>
673 <td>3</td>
674 <td colspan="2">Larry the Bird</td>
675 <td>@twitter</td>
676 </tr>
677 </tbody>
678 </table>
679 </div>
680 <p>Enable a hover state on table rows within a <code><tbody></code>.</p>
681 <div class="bs-docs-example">
682 <table class="table table-hover">
683 <thead>
684 <tr>
685 <th>#</th>
686 <th>First Name</th>
687 <th>Last Name</th>
688 <th>Username</th>
689 </tr>
690 </thead>
691 <tbody>
692 <tr>
693 <td>1</td>
694 <td>Mark</td>
695 <td>Otto</td>
696 <td>@mdo</td>
697 </tr>
698 <tr>
699 <td>2</td>
700 <td>Jacob</td>
701 <td>Thornton</td>
702 <td>@fat</td>
703 </tr>
704 <tr>
705 <td>3</td>
706 <td colspan="2">Larry the Bird</td>
707 <td>@twitter</td>
708 </tr>
709 </tbody>
710 </table>
711 </div>
712 </div>
713 </div>
714 <!-- script-for sticky-nav -->
715 <script>
716 $(document).ready(function() {
717 var navoffeset=$(".header-main").offset().top;
718 $(window).scroll(function(){
719 var scrollpos=$(window).scrollTop();
720 if(scrollpos >=navoffeset){
721 $(".header-main").addClass("fixed");
722 }else{
723 $(".header-main").removeClass("fixed");
724 }
725 });
726
727 });
728 </script>
729 <!-- /script-for sticky-nav -->
730 <!--inner block start here-->
731 <div class="inner-block">
732
733 </div>
734 <!--inner block end here-->
735 <!--copy rights start here-->
736 <div class="copyrights">
737 <p>© 2016 Pooled . All Rights Reserved | Design by <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
738 </div>
739 <!--COPY rights end here-->
740 </div>
741 </div>
742 <!--//content-inner-->
743 <!--/sidebar-menu-->
744 <div class="sidebar-menu">
745 <header class="logo1">
746 <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a>
747 </header>
748 <div style="border-top:1px ridge rgba(255, 255, 255, 0.15)"></div>
749 <div class="menu">
750 <ul id="menu" >
751 <li><a href="index.html"><i class="fa fa-tachometer"></i> <span>Dashboard</span><div class="clearfix"></div></a></li>
752
753
754 <li id="menu-academico" ><a href="inbox.html"><i class="fa fa-envelope nav_icon"></i><span>Inbox</span><div class="clearfix"></div></a></li>
755 <li><a href="gallery.html"><i class="fa fa-picture-o" aria-hidden="true"></i><span>Gallery</span><div class="clearfix"></div></a></li>
756 <li id="menu-academico" ><a href="charts.html"><i class="fa fa-bar-chart"></i><span>Charts</span><div class="clearfix"></div></a></li>
757 <li id="menu-academico" ><a href="#"><i class="fa fa-list-ul" aria-hidden="true"></i><span> Short Codes</span> <span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div></a>
758 <ul id="menu-academico-sub" >
759 <li id="menu-academico-avaliacoes" ><a href="icons.html">Icons</a></li>
760 <li id="menu-academico-avaliacoes" ><a href="typography.html">Typography</a></li>
761 <li id="menu-academico-avaliacoes" ><a href="faq.html">Faq</a></li>
762 </ul>
763 </li>
764 <li id="menu-academico" ><a href="errorpage.html"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i><span>Error Page</span><div class="clearfix"></div></a></li>
765 <li id="menu-academico" ><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i><span> UI Components</span> <span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div></a>
766 <ul id="menu-academico-sub" >
767 <li id="menu-academico-avaliacoes" ><a href="button.html">Buttons</a></li>
768 <li id="menu-academico-avaliacoes" ><a href="grid.html">Grids</a></li>
769 </ul>
770 </li>
771 <li><a href="tabels.html"><i class="fa fa-table"></i> <span>Tables</span><div class="clearfix"></div></a></li>
772 <li><a href="maps.html"><i class="fa fa-map-marker" aria-hidden="true"></i> <span>Maps</span><div class="clearfix"></div></a></li>
773 <li id="menu-academico" ><a href="#"><i class="fa fa-file-text-o"></i> <span>Pages</span> <span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div></a>
774 <ul id="menu-academico-sub" >
775 <li id="menu-academico-boletim" ><a href="calendar.html">Calendar</a></li>
776 <li id="menu-academico-avaliacoes" ><a href="signin.html">Sign In</a></li>
777 <li id="menu-academico-avaliacoes" ><a href="signup.html">Sign Up</a></li>
778
779
780 </ul>
781 </li>
782 <li><a href="#"><i class="fa fa-check-square-o nav_icon"></i><span>Forms</span> <span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div></a>
783 <ul>
784 <li><a href="input.html"> Input</a></li>
785 <li><a href="validation.html">Validation</a></li>
786 </ul>
787 </li>
788 </ul>
789 </div>
790 </div>
791 <div class="clearfix"></div>
792 </div>
793 <script>
794 var toggle = true;
795
796 $(".sidebar-icon").click(function() {
797 if (toggle)
798 {
799 $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
800 $("#menu span").css({"position":"absolute"});
801 }
802 else
803 {
804 $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
805 setTimeout(function() {
806 $("#menu span").css({"position":"relative"});
807 }, 400);
808 }
809
810 toggle = !toggle;
811 });
812 </script>
813 <!--js -->
814 <script src="js/jquery.nicescroll.js"></script>
815 <script src="js/scripts.js"></script>
816 <!-- Bootstrap Core JavaScript -->
817 <script src="js/bootstrap.min.js"></script>
818 <!-- /Bootstrap Core JavaScript -->
819
820 </body>
821 </html>
